<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1 id="text"></h1>
    <button id="btn">通知</button>
    <script>
        if (window.Notification) {
            var button = document.querySelector('#btn'),
                text = document.querySelector('#text');

            var popNotice = function () {
                if (Notification.permission == "granted") {
                    var notification = new Notification("Hi，帅哥：", {
                        body: '可以加你为好友吗？',
                        icon: './img/a1.jpeg'
                    });

                    notification.onclick = function () {
                        text.innerHTML = '张小姐已于' + new Date().toTimeString().split(' ')[0] + '加你为好友！';
                        notification.close();
                    };
                }
            };

            button.onclick = function () {
                if (Notification.permission == "granted") {
                    popNotice();
                } else if (Notification.permission != "denied") {
                    Notification.requestPermission(function (permission) {
                        popNotice();
                    });
                }
            };
        } else {
            alert('浏览器不支持Notification');
        }
    </script>
</body>

</html>